<!----------------引入头部文件-------------------->
<include file="Common/title" />
<!--------------------引入图片预览CSS文件---------------------------->
<link rel="stylesheet" href="__PUBLIC__/mui/css/tupianyulan.css">

<script type="text/javascript">
    mui.init()
</script>
<style>
    .mui-content>.mui-card:first-child {
        margin-top: 2px;
    }
    .jsbz{
        padding:13px 13px 5px ;
    }
    img{
        padding:1px;
        width:100%;
    }
    .cpmc{
        font-size:1.2em;
        color:black;
    }
    .dianc{
        font-size:0.9em;
    }
    .text-left{
        float:left;

    }
    .text-right{
        float:right;

    }
    .text-clent{
        position:absolute;
        left:70%;
    }

</style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{$cpxlmc}</h1>
</header>
<div class="mui-content">
    <div class="mui-card">
        <div id="slider" class="mui-slider" >
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <!--<a href="#">-->
                        <!--<img width="" src="__PUBLIC__/images/yqj5.jpg">-->
                    <!--</a>-->
                    <div class="mui-content-padded">
                        <p>
                            <?php $first = end($xl_info['img']); echo showimage($first['img'],1);?>
                        </p>
                    </div>
                </div>
                <?php foreach($xl_info['img'] as $k=>$v){ ?>
                <div class="mui-slider-item">
                    <div class="mui-content-padded">
                        <p>
                            <?php echo showimage($v['img'],1);?>
                        </p>
                    </div>
                </div>
                <?php } ?>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <div class="mui-content-padded">
                        <p>
                            <?php $last = reset($xl_info['img']); echo showimage($last['img'],1);?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>产品简介</b></div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner" style="text-indent:1em">
                <?php echo $xl_info['intro']; ?>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>技术标准</b></div>
        <div class="mui-card-content">
            <?php foreach($xl_info['skill'] as $k=>$v){ ?>
            <div class="mui-card-content-inner jsbz">
                <?php echo $v; ?>
            </div>
            <?php } ?>
        </div>
    </div>
    <!--<div class="mui-card">-->
    <!--<div class="mui-card-header"><b>外形尺寸和特性</b></div>-->
    <!--<div class="mui-card-content">-->
    <!--<img src="__PUBLIC__/images/chicun.png" width="100%" alt="">-->
    <!--</div>-->
    <!--</div>-->
    <div class="mui-card">
        <div class="mui-card-header"><b>外形尺寸及特性</b></div>
        <?php foreach($xl_info['ct'] as $k=>$v){ ?>
        <div class="mui-content-padded">
            <p style="padding-left:18px;margin-top:10px"><?php echo $v['ct_intro']; ?></p>
            <p>
                <!--<img src="__PUBLIC__/images/chicun.png"  data-preview-src="" data-preview-group="2" />-->
                <?php echo showimage($v['ct_img'],2);?>
            </p>
        </div>
        <?php } ?>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>降功耗曲线</b></div>
            <div class="mui-content-padded" style="background:white;">
                <p style="padding-left:18px;margin-top:10px"><?php echo $xl_info['jghsm']; ?></p>
                <p>
                    <?php echo showimage($xl_info['jgh_img'],2);?>
                </p>
            </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>电参数</b></div>
        <div class="mui-content-padded">
            <ul class="mui-table-view">
                <?php foreach($xl_info['dianc'] as $k=>$v){ ?>
                <li class="mui-table-view-cell">
                    <span class="dianc text-left"><?php echo $v['electriparam_name'];?></span>
                    <span class="dianc text-clent"><?php echo $v['electriparam_sign'];?></span>
                    <span class="dianc text-right"><?php echo $v['electriparam_val'];?></span>
                </li>
                <?php } ?>
            </ul>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>电阻器订货填写示例</b></div>
        <div class="mui-content-padded">
            <p>
                <?php echo showimage($xl_info['dhsl_img'],2);?>
            </p>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header"><b>说明</b></div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner" >
                <?php foreach($xl_info['sm'] as $k=>$v){ ?>
                <p><?php echo $v; ?></p>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">
            <b>系列单品</b>
            <?php if($wzno_count > 3): ?>
            <button style="font-size:0.6em;border:1px solid green" onclick="getcpxlwzbm();">+更多</button>
            <?php endif; ?>
        </div>
        <div class="mui-card-content">
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                <?php if(!$data){ ?>
                <li class="mui-table-view-cell">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <p class="mui-ellipsis">该系列暂无单品！</p>
                        </div>
                    </div>
                </li>
                <?php }else{ foreach($data as $k=>$v){ ?>
                <li class="mui-table-view-cell" onclick="getwzbm(this)" wzno="<?php echo $v['wzno'];?>">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <p class="mui-ellipsis cpmc"><?php echo $v['wzmc'];?></p>
                            <h5><?php echo $v['xhgg'];?></h5>
                            <p class="mui-h6 mui-ellipsis fl"><?php echo $v['flmc'];?></p>
                            <p class="mui-h6 mui-ellipsis gys"><?php echo $v['qc'];?></p>
                        </div>
                    </div>
                </li>
                <?php } }; ?>
            </ul>
        </div>
    </div>
</div>
<div style="margin-bottom:60px;"></div>

<!------------------引入底部导航卡文件---------------->
<include file="Common/nav"/>

<!------------------引入图片预览JS文件----------------->
<script src="__PUBLIC__/mui/js/mui.zoom.js"></script>
<script src="__PUBLIC__/mui/js/mui.previewimage.js"></script>
<script type="text/javascript" charset="utf-8">
    var cpxlmc = '{$cpxlmc}';
    var cpxlno = {$cpxlno};
    //获取系列下每个单品的详情函数
    function getwzbm(a){
        var wzno = a.getAttribute('wzno');
        window.location.href = "<?php echo U('Index/detail','',false);?>/wzno/"+wzno+'/cpxlno/'+cpxlno+'/cpxlmc/'+cpxlmc;
    }

    //获取系列下更多单品列表函数
    function getcpxlwzbm(){

        window.location.href = '__CONTROLLER__/cpxlwzbm/cpxlno/'+cpxlno+'/cpxlmc/'+cpxlmc;
    }

    mui.ready(function(){
        //图片预览
        mui.previewImage();

        //定时轮播图
        var slider = mui("#slider");
        slider.slider({
            interval: 5000
        });
    });
</script>
</body>

</html>